import React from 'react';
import { Upload, Icon, Modal, message } from 'antd';
import { UploadFile } from 'antd/lib/upload/interface';
import { uploadVideoUrl, getToken, getUploadResult } from '../utils/common';

export interface IVideoUploadsProps {
    editable?: boolean,
    onChange?: (fileList: any) => void,
    isList?: boolean,
    fileList: Array<any>,
    videos?: string,
}

class VideoUploads extends React.Component<IVideoUploadsProps, any>{
    constructor(props) {
        super(props);
    }

    state = {
        preview: false,
        previewVideo: '',
        fileList: [],
    }

    componentDidMount() {
        const { fileList } = this.props;
        this.setState({ fileList });
    }

    componentWillReceiveProps(nextProps) {
        const { fileList } = nextProps;
        this.setState({ fileList });
    }

    cancel = () => {
        this.setState({ preview: false });
    }

    preview = (file) => {
        this.setState({
            preview: true,
            previewVideo: file.url || file.thumbUrl,
        });
    }

    change = ({ fileList }) => {
        this.setState({ fileList });
        this.props.onChange && this.props.onChange(fileList);
    }

    render(): JSX.Element {
        const { preview = false, previewVideo = '', fileList = [] } = this.state;
        const { editable = false, isList = false, } = this.props;
        const uploadButton = (
            <div>
                <Icon type='plus' />
                <div className="ant-upload-text">上传</div>
            </div>
        );
        return (
            <div className="clearfix">
                <Upload
                    name='file'
                    accept='video/*'
                    headers={getToken()}
                    action={uploadVideoUrl}
                    listType="picture-card"
                    className="avatar-uploader"
                    fileList={fileList}
                    showUploadList={editable ? true : { showRemoveIcon: false }}
                    onPreview={this.preview}
                    onChange={this.change}
                >
                    {editable && (isList || fileList.length == 0) ? uploadButton : null}
                </Upload>
                <Modal visible={preview} footer={null} onCancel={this.cancel}>
                    <video controls style={{ width: '100%' }} src={previewVideo} />
                </Modal>
            </div>
        );
    }
}

export default VideoUploads;